<template>
  <div ref="goodasaleRef" class="line_chart"></div>
</template>

<script setup lang="ts">
import { ref } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
import * as echarts from "echarts";
const goodasaleRef = ref<HTMLDivElement>();
onMounted(() => {
  var myChart = echarts.init(goodasaleRef.value as HTMLDivElement);
  const option = {
    tooltip: {
        trigger:'axis',
        axisPointer: {
            type:'line',
        }
    },
    grid: {
        left:'0px',
        top:'25px',
        bottom:'25px',
        containLabel: true
    },
    xAxis: {
      type: "category",
      scale:false,
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
      scale:true,
    },
    
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: "line",
        smooth: true,
      },
    ],
  };
  // 绘制图表
  myChart.setOption(option);
  //监听窗口更改大小
  window.addEventListener("resize", () => {
    myChart.resize();
  });
});
</script>

<style lang="scss" scoped>
.line_chart {
  width: 100%;
  height: 100%;
}
</style>